<!DOCTYPE html>
<html lang="<?= locale_to_bcp_47(get_current_locale()) ?>">
    <head>
        <meta charset="UTF-8" />
        <title><?= is_environment('development') ? '[dev] ' : '' ?><?= $title ?> · <?= get_app_configuration('brand') ?></title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="canonical" href="<?= $this->safe('canonical') ?>">

        <meta name="application-name" content="<?= get_app_configuration('brand') ?>">
        <meta name="theme-color" content="#00d7ad">
        <link rel="manifest" href="<?= url('webmanifest') ?>">
        <link rel="icon" type="image/png" sizes="32x32" href="<?= url_static('icons/icon-32.png') ?>">
        <link rel="icon" type="image/png" sizes="16x16" href="<?= url_static('icons/icon-16.png') ?>">
        <link rel="mask-icon" href="<?= url_static('icons/safari-pinned-tab.svg') ?>" color="#00d7ad">
        <link rel="apple-touch-icon" sizes="180x180" href="<?= url_static('icons/icon-180.png') ?>">
        <meta name="msapplication-TileImage" content="<?= url_static('icons/icon-144.png') ?>">
        <meta name="msapplication-TileColor" content="#00d7ad">

        <link rel="stylesheet" href="<?= url_asset('stylesheets/application.css') ?>" data-turbo-track="reload">

        <script id="javascript-configuration" type="application/json">
            <?= $this->safe('javascript_configuration') ?>
        </script>
        <script src="<?= url_asset('javascripts/application.js') ?>" data-turbo-track="reload" defer></script>

        <?php if (get_app_configuration('plausible_url')): ?>
            <script defer data-domain="<?= get_current_host() ?>" src="<?= get_app_configuration('plausible_url') ?>/js/script.js"></script>
        <?php endif; ?>

        <meta name="csrf-param" content="csrf" />
        <meta name="csrf-token" content="<?= csrf_token() ?>" />
    </head>

    <body>
        <a
            class="no-mobile accessibility-nav anchor--action"
            href="#main-content"
            tabindex="0"
            data-turbo="false"
        >
            <?= _('Skip to main content') ?>
        </a>

        <div class="layout layout--onboarding" id="layout">
            <noscript>
                <div class="layout__banner layout__banner--alert">
                    <div class="banner__container">
                        <?= _f('You need to activate JavaScript in order to use %s.', get_app_configuration('brand')) ?>
                    </div>
                </div>
            </noscript>

            <header class="layout__header layout__header--not-connected header">
                <nav class="header__container">
                    <a class="header__link header__link--home" href="<?= url('onboarding') ?>">
                        <img
                            alt="flus"
                            src="<?= url_static('logo.svg') ?>"
                            width="120"
                            height="40.6"
                        />
                    </a>

                    <div class="header__separator"></div>

                    <p class="text--secondary">
                        <?= _f('Step %d on %d', $current_step, 6) ?>
                        <?php if ($current_step < 6): ?>
                            (<a href="<?= url('onboarding', ['step' => $current_step + 1]) ?>"><?= _('skip') ?></a>)
                        <?php else: ?>
                            (<?= _('finished') ?>)
                        <?php endif; ?>
                    </p>
                </nav>
            </header>

            <main id="main-content" class="layout__main" tabindex="-1">
                <section class="layout__content">
                    <?= $this->safe('content') ?>
                </section>
            </main>
        </div>
    </body>
</html>
